<template>
  <div>
    <BaseVxeGrid
      ref="vxeGridRef"
      :gridOptions="gridOptions"
      :gridEvents="gridEvents"
      v-on="gridEvents"
      :loading="loading"
    ></BaseVxeGrid>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type {
  VxeGridListeners,
  VxeGridProps,
  VxeTableConstructor,
  VxeTableDefines,
} from 'vxe-table'
import BaseVxeGrid from '../components/BaseVxeGrid.vue'
import type { ComponentExposed } from 'vue-component-type-helpers'

// 分组 + 虚拟滚动 + 行列合并， 换一种方式进行实现
// https://vxetable.cn/#/component/grid/expand/childTable 子表格
// https://vxetable.cn/#/component/grid/scroll/merge  merge-cells 或调用函数 setMergeCells、setMergeCells 合并时, 仍旧可用 虚拟表格

type RowVO = {
  orderKey: string
  titleMsg: string
  patientId: string
  mixOrderState: null
  mixTypeId: null
  mixMsg: null
  repeatIndicator: number
  mixCatalog: null
  route: string
  frequency: string
  orderStatus: number
  startDateTime: string
  stopDateTime: string
  speedDesc: string
  performSchedule: string
  mixUser: null
  mixTime: null
  processId: null
  processText: null
  processUser: null
  processTime: null
  orderPassTime: null
  orderPassUser: null
  refuseTime: null
  restoreTime: null
  restoreText: null
  orderNo: string
  enterDateTime: string
  createTime: string
  hisOrderItemList: object[]
}

const vxeGridRef = ref<ComponentExposed<typeof BaseVxeGrid<RowVO>>>()

// https://vxetable.cn/#/component/grid/checkbox/range 滑动复选框多选
const gridOptions = ref<VxeGridProps<RowVO>>({
  loading: true,
  stripe: false,
  rowConfig: {
    isCurrent: false,
  },
  tooltipConfig: {
    showAll: false,
  },
  expandConfig: {
    expandAll: true,
  },
  aggregateConfig: {
    groupFields: ['patientId'],
    showTotal: false,
    trigger: 'row', // 添加 trigger 配置
    contentMethod(params: {
      $table: VxeTableConstructor<RowVO>
      groupField: string
      groupColumn: VxeTableDefines.ColumnInfo<RowVO>
      column: VxeTableDefines.ColumnInfo<RowVO>
      groupValue: unknown
    }) {
      const { $table, groupValue } = params
      const allData = $table.getTableData().fullData
      // 筛选出当前分组的数据
      const groupRows = allData.filter((row) => row.patientId === groupValue)

      if (groupRows.length > 0) {
        return groupRows[0].titleMsg
      }
    },
  },
  virtualXConfig: {
    enabled: true,
  },
  virtualYConfig: {
    enabled: true,
  },
  mergeCells: [
    { row: 0, col: 1, rowspan: 1, colspan: 10 },
    { row: 1, col: 1, rowspan: 1, colspan: 10 },
    { row: 2, col: 1, rowspan: 1, colspan: 10 },
    { row: 3, col: 1, rowspan: 1, colspan: 10 },
    { row: 4, col: 1, rowspan: 1, colspan: 10 },
  ],
  columns: [
    { type: 'checkbox', field: 'checkbox' },
    //{ minWidth: '36px', title: '序号', type: 'seq', fixed: 'left' },
    { minWidth: '100px', field: 'mixOrderState', title: '审核状态', rowGroupNode: true },
    { minWidth: '100px', field: 'orderKey', title: 'orderKey', visible: false },
    { minWidth: '100px', field: 'mixTypeId', title: '配伍关系I' },
    { minWidth: '100px', field: 'mixMsg', title: '审核说明' },
    { minWidth: '100px', field: 'repeatIndicator', title: '类型' },
    { minWidth: '100px', field: 'mixCatalog', title: '分类' },
    { minWidth: '200px', field: 'orderText', title: '医嘱正文' },
    { minWidth: '100px', field: 'dosage', title: '剂量' },
    { minWidth: '100px', field: 'route', title: '途径' },
    { minWidth: '100px', field: 'frequency', title: '频次' },
    { minWidth: '100px', field: 'orderStatus', title: '医嘱状态' },
    { minWidth: '160px', field: 'startDateTime', title: '开始时间' },
    { minWidth: '160px', field: 'stopDateTime', title: '结束时间' },
    { minWidth: '100px', field: 'drugBillingAttr', title: '计价' },
    { minWidth: '100px', field: 'freqDetail', title: '说明' },
    { minWidth: '100px', field: 'speedDesc', title: '滴速' },
    { minWidth: '100px', field: 'performSchedule', title: '执行计划' },
    { minWidth: '100px', field: 'mixUser', title: '审查人' },
    { minWidth: '160px', field: 'mixTime', title: '审查时间' },
    { minWidth: '100px', field: 'processId', title: '点评分类' },
    { minWidth: '100px', field: 'processText', title: '点评意见' },
    { minWidth: '100px', field: 'processUser', title: '点评人' },
    { minWidth: '160px', field: 'ProcessTime', title: '点评时间' },
    { minWidth: '160px', field: 'orderPassTime', title: '放行时间' },
    { minWidth: '100px', field: 'orderPassUser', title: '放行人' },
    { minWidth: '160px', field: 'refuseTime', title: '拒发时间' },
    { minWidth: '160px', field: 'restoreTime', title: '恢复时间' },
    { minWidth: '160px', field: 'restoreText', title: '恢复说明' },
    { minWidth: '100px', field: 'orderNo', title: '组号' },
    { minWidth: '160px', field: 'enterDateTime', title: '录入时间' },
    { minWidth: '160px', field: 'CaeateTime', title: '同步时间' },
  ],
  data: [],
  menuConfig: {
    enabled: true,
    header: {},
    body: {},
    footer: {},
  },
})

import tData from './data/MergeCellsDoctorAdvice.json'

// 扁平化数据, 将children数据与父级平级
const flatData: object[] = []
tData.forEach((item) => {
  const newItem = item
  newItem.hisOrderItemList.forEach((element) => {
    const newElement = { ...newItem, ...element }
    flatData.push(newElement)
  })
})
console.log('gridOptions.value.data', flatData)
gridOptions.value.data = flatData as unknown as RowVO[]

const loading = ref(false)

const gridEvents: VxeGridListeners<RowVO> = {
  // 禁止行编辑
  editDisabled({ row, column }) {
    console.log('禁止编辑', column.field, row)
  },
  // editActivated({ row }) {},
  sortChange({ sortList }) {
    console.info(sortList.map((item) => `${item.field},${item.order}`).join('; '))
  },
  menuClick({ menu, row, column }) {
    console.log('菜单点击', menu.code, row, column)
  },
}
</script>

<style scoped></style>
